<template>
    <div class="file-content-layout">
        <header-view>
            <img src="../../../assets/image/back.png" alt="" class="icon" @click="goBack">
            <div class="title">{{info.name.replace('.' + info.suffix, '')}}</div>
            <div class="icon"></div>
        </header-view>
        <div class="content editor" ref="content">
            <!--图片展示-->
            <img v-if="info.suffix.includes('png') ||info.suffix.includes('jpg')"
                 :src="ServerUrl + '/file/download?id=' + info.id"
            >
            <!--文档文件-->
            <div id="pdf"
                 v-if="info.suffix === 'pdf'|| info.suffix === 'doc' || info.suffix === 'docx'|| info.suffix === 'xlsx'|| info.suffix === 'xls'">
            </div>
            <tinymce
                    v-if="info.suffix === 'html'&&isShowEditor"
                    ref="tinymce"
                    :init-height="tinyHeight"
                    :selected-file="info"
                    :toolbar="toolbar"
                    @onClick="onClick"
                    :readonly="readonly"
                    :is-update="isUpdate"
            />
            <!--无内容-->
            <img v-if="info.suffix === ''" src="../../../assets/image/folder.png" alt>
        </div>
    </div>
</template>

<script>
    import HeaderView from '../../common/HeaderView';
    // import pdf from 'vue-pdf'
    import tinymce from '../../common/tinymce'
    import Pdfh5 from "pdfh5";
    import "pdfh5/css/pdfh5.css";

    import {getFileDetails} from '../../../api/file'

    export default {
        name: 'FileContentView',
        components: {HeaderView, tinymce},
        data() {
            return {
                info: this.$route.params.info,
                content: '',
                ServerUrl: process.env.VUE_APP_BASE_API,
                pdfSrc: '',
                numPages: undefined,
                readonly: true,
                toolbar: '',
                bodyWidth: document.body.clientWidth,
                ele: null, // 不能在这里设置， dom还没有生成
                isUpdate: 1,
                pdfh5: null,
                tinyHeight: 0,
                isShowEditor: false
            }
        },
        created() {

        },
        mounted() {
            const content = this.$refs.content.getBoundingClientRect();
            this.tinyHeight = content.height;
            setTimeout(() => {
                let dom = document.getElementsByClassName('tox-editor-header')[0];
                if (dom) {
                    dom.style.position = "fixed";
                    dom.style.width = '100%';
                    dom.style.height = '39px';
                    dom.style.left = content.left + "0";
                    dom.style.top = content.top + "px";
                    this.$refs.content.style.paddingTop =  '39px';
                }
            }, 100);
            // console.log(this.info)

            this.isShowEditor = true;
            this.ele = document.getElementById('pdf')
            this.pdfSrc = this.ServerUrl + '/file/export/pdf?fileid=' + this.info.id + '#toolbar=0'
            if (this.info.suffix === 'html')
                this.getFileDetails()
            if (this.info.suffix === 'pdf' || this.info.suffix === 'doc' || this.info.suffix === 'docx' || this.info.suffix === 'xlsx' || this.info.suffix === 'xls') {
                // this.pdfSrc = 'http://www.ccvi.top:6008/file/export/pdf?fileid=844#toolbar=0'
                this.pdfh5 = new Pdfh5("#pdf", {
                    pdfurl: this.pdfSrc
                });
                //监听完成事件
                this.pdfh5.on("complete", function (status, msg, time) {
                    console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
                })
            }
            this.getEditAuthority()
        },
        methods: {
            getEditAuthority() {
                const realname = JSON.parse(localStorage.getItem('userInfo')).realName
                const editor = this.info.editor
                if (this.info.suffix.includes('html')) {
                    if (editor === realname) {
                        this.$store.commit('index/set_authority', {
                            isLook: 1,
                            isUpdate: 1,
                            isDelete: 0
                        })
                        this.readonly = false
                        this.isUpdate = 1
                        this.toolbar = 'undo redo | bold italic forecolor backcolor | lists image media | removeformat restoredraft save'
                    } else {
                        this.readonly = true
                        this.toolbar = ''
                        if (editor) {
                            this.$toast(
                                `文档正由${editor}编辑，请联系他释放权限后，您才能编辑`
                            )
                        }
                        this.$store.commit('index/set_authority', {
                            isLook: 1,
                            isUpdate: 0,
                            isDelete: 0
                        })
                        this.toolbar = ''
                        this.isUpdate = 0
                    }
                }
            },
            goBack() {
                if (this.$route.params.type === 'file')
                    this.$router.go(-1);
                else if (this.$route.params.type === 'share')
                    this.$router.push({name: 'index', params: {index: 3}})
            },
            getFileDetails() {
                sessionStorage.fileid = this.info.id
                getFileDetails(this.info.id)
                    .then(result => {
                        // const rx = new RegExp(/<body[^>]*>([\s\S]+?)<\/body>/i)
                        // const m = rx.exec(result)
                        let c1 = result.replace(/<img width="100%"/g, "<img");
                        let c2 = c1.replace(/<img/g, '<img width="100%" height="auto"');
                        this.$refs.tinymce.myValue = c2;
                        this.$refs.tinymce.oldValue = c2;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            onClick() {
                // console.log(123)
            },
            // updateHtml() {
            //   const fileid = this.info.id
            //   const html = this.$refs.tinymce.getHtml()
            //   updateHtml(fileid, html)
            //       .then(result => {
            //         console.log(result)
            //       })
            //       .catch(err => {
            //         console.log(err)
            //       })
            // },
        }

    }
</script>
<style>
    .tox-editor-header {
        /*background: #e3e3e3;*/
    }
</style>
<style scoped>

    .file-content-layout {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-y: hidden;
    }

    .title {

    }

    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 135px;
        bottom: 0;
        overflow-y: auto;
        /*overflow-y: hidden;*/
    }

    .detail {
        padding: 20px;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    #pdf {
        width: 100%;
        height: 100vh;
        overflow-x: hidden;
    }
</style>
